import {ref, onMounted, onUnmounted} from 'vue';
import {useMouseMove} from "@/common/event.ts";

// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
    // 被组合式函数封装和管理的状态
    const x = ref(0);
    const y = ref(0);

    // 组合式函数可以随时更改其状态。
    function update(event:MouseEvent) {
        x.value = event.pageX;
        y.value = event.pageY;
    }

    useMouseMove(window, 'mousemove', update);
    //把下面的代码继续封装到event.js文件中
    // 一个组合式函数也可以挂靠在所属组件的生命周期上来启动和卸载副作用
    // onMounted(() => window.addEventListener('mousemove', update));
    // onUnmounted(() => window.addEventListener('mousemove', update));
    // 通过返回值暴露所管理的状态
    return {x, y}
}